<template>
  <div class="audio">
    <div class="play-main">
      <audio ref="player" :src="src" controls="controls" @ended="nextPlay()">
        您的浏览器不支持 audio 标签。
      </audio>
      <el-input class="search-input" v-model="name" clearable placeholder="歌曲名称" suffix-icon="el-icon-search"  @input="filterList"/>
      <el-select class="play-model" v-model="model" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-folder-opened" @click="openDir()"></el-button>
    </div>
    <div class="play-list">
      <div class="item" title="点击播放" :class="{'active':activeId === item['id']}" v-for="(item,index) in playList" @click="play(item)">
        <span class="name">{{item['name']}}</span>
        <span class="path">{{item['path']}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {GetList,GetFromJson} from "../../wailsjs/go/controller/Audio";
export default {
  name: 'AudioView',
  data() {
    return {
      name:'',
      activeId:0,
      list: [],
      playList: [],
      model:0,//0列表循环、1随机播放、2单曲循环
      src:'',
      dir:'',
      options: [{
        value: 0,
        label: '列表循环'
      }, {
        value: 1,
        label: '随机播放'
      }, {
        value: 2,
        label: '单曲循环'
      }],
    }
  },
  created() {
    this.loadJson()
  },
  mounted() {},
  methods: {
    //播放下一首
    nextPlay(){
      //列表循环
      if(this.model === 0){
        if(this.activeId < this.list.length - 1){
          this.activeId ++
        }else{
          this.activeId = 0
        }
        //随机播放
      }else if(this.model === 1){
        this.activeId = Math.floor(Math.random() * this.list.length)
      }
      this.play(this.list[this.activeId])
    },
    //读取缓存文件
    loadJson(){
      //读取音乐列表缓存文件
      GetFromJson().then(res => {
        if(res.length < 1){
          //如果没有，提示打开目录选择框
          this.openDir()
          return
        }
        this.list = res
        this.playList = res
        this.activeId = -1
      })
    },
    //搜索歌曲
    filterList(){
      if(this.name === ''){
        this.playList = this.list
        return
      }
      let data = []
      this.list.forEach((val,index) => {
          if(val['name'].indexOf(this.name.trim()) !== -1){
            data.push(val)
          }
      })
      this.playList = data
    },
    //播放
    play(item){
      this.activeId = item['id']
      this.src = `http://localhost:10086/file?filename=${item['path']}`
      this.$nextTick(()=>{
        let audioPlayer = this.$refs.player;
        audioPlayer.currentTime = 0; // 重置当前播放时间为0
        audioPlayer.play(); // 播放音频
      })
    },
    //打开目录获取音频
    openDir(){
      GetList().then(res => {
        if(res['code'] === 200){
          this.list = res['data']
          this.playList = res['data']
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.audio {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .play-main{
    padding: 10px;
    display: flex;
    align-items: center;
    ::v-deep .el-input {
      width: 180px;
    }
    .search-input{
      margin: 0 5px;
    }
    .play-model{
      margin-right: 5px;
    }
  }
  .play-list{
    padding: 10px;
    flex: 1;
    overflow: auto;
    .item{
      justify-content: space-between;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 5px 10px;
      &.active,&:hover{
        cursor: pointer;
        box-shadow: 0 5px 6px #fff;
        background: #eee;
      }
      .name{
        font-size: 14px;
        color: #000;
        font-weight: 500;
      }
      .path{
        font-size: 12px;
        color: #4f5a6b;
      }
    }
  }
}
</style>
